<template>
  <view class="app-container">
    <u-toast ref="uToast" />
    <!-- 密码登录 -->
    <text class="app-container__tip">欢迎登录~</text>
    <view class="app-container__item">
      <u-tabs
        :list="list"
        :is-scroll="false"
        :current="current"
        @change="change"
      >
      </u-tabs>
      <password-login
        v-show="type === 'password'"
        @change="handleChangeType"
        :isChecked="checked"
      ></password-login>
      <!-- 验证码登录 -->
      <code-login
        v-show="type === 'code'"
        @change="handleChangeType"
        :isChecked="checked"
      ></code-login>
      <view class="flex justify-center app-container__footer">
        <!-- 复选框 -->
        <u-checkbox-group>
          <u-checkbox @change="checkboxChange" v-model="checked"></u-checkbox>
        </u-checkbox-group>
        <text>登录即同意</text>
        <text class="app-container__footer--link" @click="openAgreementUrl()">
          《用户隐私协议》
        </text>
      </view>
    </view>
  </view>
</template>

<script>
import PasswordLogin from './components/PasswordLogin.vue';
import CodeLogin from './components/CodeLogin.vue';
export default {
  components: {
    PasswordLogin,
    CodeLogin,
  },
  data() {
    return {
      type: 'password',
      list: [
        {
          name: '账号登录',
        },
        {
          name: '验证码登录',
        },
      ],
      current: 0,
      checked: false,
    };
  },
  methods: {
    openAgreementUrl() {
      // let url = 'http://118.31.238.190/ysxy.html';
      // uni.navigateTo({
      //   url: '/pages/main/webview/web_view?url=' + url,
      // });
      // 跳转隐私页面
      uni.navigateTo({
        url: '/pages/main/privacy/privacy',
      });
    },
    handleChangeType(type) {
      this.type = type;
    },
    // 切换事件
    change(index) {
      this.current = index;
      console.log('index----->76', index);
      if (index == 0) {
        this.handleChangeType('password');
      } else {
        this.handleChangeType('code');
      }
    },
    checkboxChange(e) {
      this.checked = !this.checked;
      // console.log('this.checked----->89', this.checked);
    },
  },
};
</script>
<style scoped lang="scss">
page {
  background-color: #f5f5f5 !important;
}
.app-container {
  width: 100vw;
  height: 100vh;
  padding: 0rpx 30rpx;
  position: relative;
  // 添加上边距
  padding-top: 100rpx;
  &__tip {
    font-size: 44rpx;
    font-weight: bold;
  }
  &__item {
    border: 1px solid #e5e5e5;
    border-radius: 20rpx;
    margin-top: 100rpx;
    padding: 10rpx;
    background-color: white;
  }
  &__footer {
    font-size: 24rpx;
    margin-bottom: 20rpx;
    &--link {
      color: $zx-theme-color;
    }
  }
}
::v-deep .u-checkbox__label {
  margin-left: -12rpx;
}
</style>
